<template>
	<view class="integral-sign">
		<view class="top-bg">
			<view class="first-box">
				我的积分
			</view>
			<view class="secound-box">
				4568
			</view>
		</view>
		<view class="detal-content">
			<view class="title">
				<view class="line"></view>
				收支明细
			</view>
			<view>
				<view v-for="(item, index) in detailList" :key="index" class="detail-box">
					<view class="left-box">
						<view class="type">{{ item.type }}</view>
						<view class="time">{{ item.time }}</view>
					</view>
					<view :class="['right-box', item.amount > 0 ? '' : 'red']">{{ item.amount }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailList:[
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '-999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
					{type:'购物奖励',time:'2022-05-05 11:11:11', amount: '+999'},
				]
			};
		},

		onLoad() {
		},

		methods: {
			
		}
	};
</script>
<style lang="scss">
	.top-bg {
		width: 710rpx;
		height: 289rpx;
		margin: 30rpx auto 0;
		background-image: url('../../../static/images/jifen-bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		.first-box {
			padding-top: 64rpx;
			margin-left: 51rpx;
		}
		.secound-box {
			margin-top: 16rpx;
			margin-left: 51rpx;
			font-size: 90rpx;
		}
	}
	.detal-content {
		.title {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			padding-left: 20rpx;
			margin-top: 30rpx;
			.line {
				width: 6rpx;
				height: 30rpx;
				margin-right: 20rpx;
				background: #0271E4;
				border-radius: 12rpx;
			}
		}
	}
	.detail-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 113rpx;
		margin: 15rpx auto 0;
		background-color: white;
		.type {
			margin-left: 21rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}
		.time {
			margin-left: 34rpx;
			margin-top: 11rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}
		.right-box {
			margin-right: 15rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
		.red {
			color: #FA6C47;
		}
	}
</style>
